<template>
	<div class="report-wrapper">
		<n-tabs type="line" animated>
			<n-tab-pane name="0" :tab="$t('report.stationReport')">
				<Station />
			</n-tab-pane>
			<n-tab-pane name="1" :tab="$t('report.phalanxReport')">
				<Phalanx />
			</n-tab-pane>
			<n-tab-pane name="2" :tab="$t('report.subarrayReport')">
				<Subarray />
			</n-tab-pane>
			<n-tab-pane name="3" :tab="$t('report.deviceReport')">
				<Device />
			</n-tab-pane>
		</n-tabs>
	</div>
</template>

<script lang="ts" setup>
import Station from './station/index.vue';
import Phalanx from './phalanx/index.vue';
import Subarray from './subarray/index.vue';
import Device from './device/index.vue';
</script>
<script lang="ts">
export default defineComponent({
	name: 'StationReport',
});
</script>
<style lang="scss" scoped>
.report-wrapper {
	width: 100%;
	height: 100%;

	:deep(.n-tabs) {
		height: 100%;

		.n-tabs-bar,
		.n-tabs-tab-pad {
			display: none;
		}

		.n-tabs-tab-wrapper {
			box-sizing: border-box;

			.n-tabs-tab {
				position: relative;
				width: 110px;
				height: 52px;
				justify-content: center;

				&::after {
					position: absolute;
					top: 11px;
					right: -1px;
					display: block;
					width: 1px;
					height: 30px;
					background-color: #343946;
					content: '';
				}
			}

			.n-tabs-tab--active {
				background-color: #343946;

				&::after {
					content: none;
				}
			}
		}

		.n-tabs-nav-scroll-wrapper {
			// tabs-header样式
			margin-left: 1px;
			background-color: #252a33;

			.n-tabs-nav-scroll-content {
				border: none;
			}
		}

		.n-tabs-pane-wrapper {
			// tabs-main
			flex: 1;

			.n-tab-pane {
				height: 100%;
				padding-top: 0;
			}
		}
	}
}
</style>
